<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>{$nickname}的推广二维码</title>

    <style>
        body {
            background: #dedede;
            font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
        }

        .container {
            width: 94%;
            height: 100%;
            margin: 0 auto;
        }

        .qrcode img {
            width: 100%;
            margin: 0 auto;
        }

        img {
            width: 215px;
            margin: 0 auto;
        }

        button {
            width: 90%;
            margin-top: 5px;
            margin-bottom: 5px;
            display: inline-block;
            padding: 6px 12px;
            font-size: 16px;
            color: #FFF;
            font-weight: 400;
            line-height: 1.7;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            -moz-user-select: none;
            background-image: none;
            border: 0;
            border-radius: 4px;
            text-transform: none;
            box-sizing: border-box;
            background: #31B0D5;
        }
        .button {
            width: 90%;
            display: block;
            margin: 5px auto;
            padding-top: 5px;
            padding-bottom: 5px;
            font-weight: 400;
            text-align: center;
            color: #FFF;
            background-color: #5BC0DE;
        }

        #cover {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 29;
            background-color: #000000;
            opacity: 0.7;
        }

        #guide {
            display: none;
            position: absolute;
            right: 18px;
            top: 5px;
            z-index: 29;
        }

        #guide img {
            width: 230px;
            z-index: 91;
        }

        /* CSS Document */
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        body {
            background: none;
        }

        input, button, select, textarea {
            outline: none;
        }

        ul, li, dl, ol {
            list-style: none;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        .box {
            width: 92%;
            margin: 0 auto;
            margin-tOP: 20px;
        }

        .bcon {
            width: 100%;
            border: 1px solid #eee;
            margin: 30px auto;
        }

        .bcon h1 {
            border-bottom: 1px solid #eee;
            padding: 0 10px;
        }
        .bcon h5 {
            border-bottom: 1px solid #eee;
            padding: 0 10px;
        }
        .bcon h1 b {
            font: bold 14px/40px '宋体';
            border-top: 2px solid #3492D1;
            padding: 0 8px;
            margin-top: -1px;
            display: inline-block;
        }

        .list_lh {
            height: 400px;
            overflow: hidden;
        }

        .list_lh li {
            padding: 10px;
            border-bottom: 1px solid #CCC;
        }

        .list_lh li.lieven {
            background: #F0F2F3;
        }

        .list_lh li p {
            height: 24px;
            line-height: 24px;
        }

        .list_lh li p a {
            float: left;
        }

        .list_lh li p em {
            width: 80px;
            font: normal 12px/24px Arial;
            color: #FF3300;
            float: left;
            display: inline-block;
        }

        .list_lh li p span {
            color: #999;
            float: right;
        }

        .list_lh li p a.btn_lh {
            background: #28BD19;
            height: 17px;
            line-height: 17px;
            color: #fff;
            padding: 0 5px;
            margin-top: 4px;
            display: inline-block;
            float: right;
        }

        .btn_lh:hover {
            color: #fff;
            text-decoration: none;
        }

        .btm p {
            font: normal 12px/24px 'Microsoft YaHei';
            text-align: center;
        }
    </style>
</head>
<!--所有页面由jay_medivh@foxmail.com强力驱动-->
<body>
<div id="cover"></div>
<div id="guide"><img src="__PUBLIC__/images/share.png"></div>
<div class="container" id="qrcode">
    <div class="qrcode">
        <img alt="二维码加载中，请稍后……" title="二维码加载中，请稍后……" src={$QrcodeUrl}>
    </div>
    <button class="button" onclick="_system._guide(true)">我要分享!</button>
</div>

<div class="box">
    <div class="bcon">
        <h1><b>扫码关注动态</b></h1>
        <div class="list_lh">
            <ul>
                <foreach item="userinfo" name="userinfo">
                    <li>
                        <p><a href="#">你的好友</a><a href="#" class="btn_lh">{$userinfo['address']}</a><em>{$userinfo['nickname']}</em>
                        </p>

                        <p><a href="#" class="a_blue">扫描了你的二维码并关注了公众号</a><span>{$userinfo['time']|timeFormat=###}</span>
                        </p>
                    </li>
                </foreach>
            </ul>
        </div>
    </div>
</div>


<script>
    var _system = {
        $: function (id) {
            return document.getElementById(id);
        },
        _client: function () {
            return {
                w: document.documentElement.scrollWidth,
                h: document.documentElement.scrollHeight,
                bw: document.documentElement.clientWidth,
                bh: document.documentElement.clientHeight
            };
        },
        _scroll: function () {
            return {
                x: document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft,
                y: document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop
            };
        },
        _cover: function (show) {
            if (show) {
                this.$("cover").style.display = "block";
                this.$("cover").style.width = (this._client().bw > this._client().w ? this._client().bw : this._client().w) + "px";
                this.$("cover").style.height = (this._client().bh > this._client().h ? this._client().bh : this._client().h) + "px";
            } else {
                this.$("cover").style.display = "none";
            }
        },
        _guide: function (click) {
            this._cover(true);
            this.$("guide").style.display = "block";
            this.$("guide").style.top = (_system._scroll().y + 5) + "px";
            window.onresize = function () {
                _system._cover(true);
                _system.$("guide").style.top = (_system._scroll().y + 5) + "px";
            };
            if (click) {
                _system.$("cover").onclick = function () {
                    _system._cover();
                    _system.$("guide").style.display = "none";
                    _system.$("cover").onclick = null;
                    window.onresize = null;
                };
            }
        },
        _zero: function (n) {
            return n < 0 ? 0 : n;
        }
    }
</script>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script>
    $(function () {
        var QRcodeUrl = $('.qrcode > img').attr('src');
        if (QRcodeUrl == '') {
            $.ajax({
                type: "post",
                url: "{:U('Qrcode/add')}",
                dataType: "text",
                success: function (data) {
                    $('.qrcode > img').attr('src', data);
                }

            })
        }
    })
    function GetCode() {
        $('.container').show();
        $('.loading').hide();
    }
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    wx.config({
        debug: false,
        appId: 'wx22c589512a2d5f61',
        timestamp: "{:JsSign()['time']}",
        nonceStr: "{:JsSign()['nonce']}",
        signature: "{:JsSign()['sign']}",
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
    });
    wx.ready(function () {
        wx.onMenuShareTimeline({
            title: '点一下，助{$nickname}走上人生巅峰!!!',
            link: '{$share}',
            imgUrl: 'http://public.weirongm.com/DaChongQing/images/share-friends.jpg'
        });
        wx.onMenuShareAppMessage({
            title: '点一下，助{$nickname}走上人生巅峰!!!',
            desc: '',
            link: '{$share}',
            imgUrl: 'http://public.weirongm.com/DaChongQing/images/share-friends.jpg',
            type: 'link'
        });
        wx.onMenuShareQQ({
            title: '点一下，助{$nickname}走上人生巅峰!!!',
            desc: '',
            link: '{$share}',
            imgUrl: 'http://public.weirongm.com/DaChongQing/images/share-friends.jpg'
        });
        wx.onMenuShareWeibo({
            title: '点一下，助{$nickname}走上人生巅峰!!!',
            desc: '',
            link: '{$share}', // 分享链接
            imgUrl: 'http://public.weirongm.com/DaChongQing/images/share-friends.jpg'
        });
        wx.onMenuShareQZone({
            title: '点一下，助{$nickname}走上人生巅峰!!!',
            desc: '',
            link: '{$share}',
            imgUrl: 'http://public.weirongm.com/DaChongQing/images/share-friends.jpg'
        });
    });
    wx.error(function (res) {

    });

    (function ($) {
        $.fn.myScroll = function (options) {
            //默认配置
            var defaults = {
                speed: 40,  //滚动速度,值越大速度越慢
                rowHeight: 24 //每行的高度
            };

            var opts = $.extend({}, defaults, options), intId = [];

            function marquee(obj, step) {

                obj.find("ul").animate({
                    marginTop: '-=1'
                }, 0, function () {
                    var s = Math.abs(parseInt($(this).css("margin-top")));
                    if (s >= step) {
                        $(this).find("li").slice(0, 1).appendTo($(this));
                        $(this).css("margin-top", 0);
                    }
                });
            }

            this.each(function (i) {
                var sh = opts["rowHeight"], speed = opts["speed"], _this = $(this);
                intId[i] = setInterval(function () {
                    if (_this.find("ul").height() <= _this.height()) {
                        clearInterval(intId[i]);
                    } else {
                        marquee(_this, sh);
                    }
                }, speed);

//                    _this.hover(function(){
//                        clearInterval(intId[i]);
//                    },function(){
//                        intId[i] = setInterval(function(){
//                            if(_this.find("ul").height()<=_this.height()){
//                                clearInterval(intId[i]);
//                            }else{
//                                marquee(_this, sh);
//                            }
//                        }, speed);
//                    });

            });

        }

    })(jQuery);
    $(function () {
        $("div.topm").myScroll({
            speed: 40, //数值越大，速度越慢
            rowHeight: 30 //li的高度
        });

    })
    $(function () {
        $("div.list_lh").myScroll({
            speed: 20, //数值越大，速度越慢
            rowHeight: 68 //li的高度
        });
    });

</script>
</body>
</html>